<template>
  <!-- <div class="box">
    <div class="screen" id="screen">
    </div>
  </div> -->
  <!-- <v-scale-screen> -->
  <!-- <span style="color: white">{{ businessDistributionData }}</span> -->
  <div class="wrap">
    <div class="screen" id="screen">
      <!-- 顶部 logo -->
      <div class="top">
        <img :src="require('@/assets/img/logo.png')" alt="" />
      </div>
      <div class="center">
        <div class="numberShow">
          <div class="first numberBox">
            <div class="num" style="color: #69ddee">
              {{ formatNumber(dashboardData.merchantNumber)
              }}<span class="units">户</span>
            </div>
            <div class="text">累计商户数</div>
          </div>
          <div class="second numberBox">
            <div class="num" style="color: #69ddee">
              {{ formatNumber((dashboardData.userNumber / 10000).toFixed())
              }}<span class="units">万户</span>
            </div>
            <div class="text">累计用户数</div>
          </div>
          <div class="third numberBox">
            <div class="num" style="color: #69ddee">
              {{
                formatNumber(
                  (dashboardData.currentYearTxNumber / 10000).toFixed()
                )
              }}<span class="units">万笔</span>
            </div>
            <div class="text">本年累计交易笔数</div>
          </div>
          <div class="four numberBox">
            <div class="num" style="color: #69ddee">
              {{ formatNumber(dashboardData.currentDayTxNumber)
              }}<span class="units">笔</span>
            </div>
            <div class="text">今日交易笔数</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="leftBox">
          <div class="echartsDiv echartsDiv1">
            <div class="firstLine">
              <img
                :src="require('@/assets/2487.png')"
                alt=""
                srcset=""
                width="22px"
                height="22px"
                class="iconImg"
              />
              <div class="title">当日交易量</div>
            </div>
            <div class="topLeftMain echarts" id="topLeftMain"></div>
          </div>
          <div class="echartsDiv echartsDiv2">
            <div class="firstLine">
              <img
                :src="require('@/assets/260.png')"
                alt=""
                srcset=""
                width="22px"
                height="22px"
              />
              <div class="title">月交易趋势图</div>
            </div>
            <div class="bottomLeftMain echarts" id="bottomLeftMain"></div>
          </div>
        </div>
        <div class="centerBox">
          <div class="echartsDiv">
            <div class="centerMain echarts" id="centerMain"></div>
          </div>
        </div>
        <div class="rightBox">
          <div class="echartsDiv echartsDiv3">
            <div class="firstLine">
              <img
                :src="require('@/assets/53.png')"
                alt=""
                srcset=""
                width="22px"
                height="22px"
              />
              <div class="title">本年新增用户</div>
            </div>
            <div class="topRightMain echarts" id="topRightMain"></div>
          </div>
          <div class="echartsDiv echartsDiv4">
            <div class="firstLine">
              <img
                :src="require('@/assets/160.png')"
                alt=""
                srcset=""
                width="22px"
                height="22px"
              />
              <div class="title">今日行业分布</div>
            </div>
            <div class="bottomRightMain echarts" id="bottomRightMain"></div>
            <div
              style="
                color: #adf8ff;
                font-size: 14px;
                position: absolute;
                right: 35px;
                top: 55px;
              "
            >
              单位：笔数
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- </v-scale-screen> -->
</template>
<script>
// import VScaleScreen from "v-scale-screen";
import * as echarts from "echarts";
import chinaMap from "@/assets/json/china.json";
// import WebSocket from "websocket";
export default {
  components: {
    // VScaleScreen,
  },
  data() {
    return {
      dashboardData: {
        merchantNumber: "0", //商户数
        userNumber: "0", //用户数
        currentYearTxNumber: "0", //当年交易数量
        currentDayTxNumber: "0", //当天交易数量
      },
      // 当日交易量x轴
      currentDayX: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
      ],
      currentDayTxData: {
        number: [], //交易量
        amount: [], //交易金额
      },
      monthTxData: {
        number: [], //交易量
        month: [], //月份
        amount: [], //交易金额
      },
      userData: [
        // {
        //   name: "个人",
        //   value: 0,
        // },
        // {
        //   name: "企业",
        //   value: 100,
        // },
        // {
        //   name: "个体户",
        //   value: 0,
        // },
      ],
      businessDistributionData: [
        // { name: "银行金融机构", value: 0 },
        // { name: "准金融机构", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "航运物流", value: 0 },
        // { name: "教育", value: 0 },
        // { name: "航运物流", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "教育", value: 0 },
      ],
      geoCoordMap: [
        {
          value: [127.9688, 45.368],
          name: "黑龙江",
          number: 1.84,
          value: 1.84,
          // itemStyle: { normal: { areaColor: "#FD9A9A" } },
        },
        {
          value: [110.3467, 41.4899],
          name: "内蒙古",
          number: 0.42,
          value: 0.42,
          // itemStyle: { normal: { areaColor: "#FFDC63" } },
        },
        { value: [125.8154, 44.2584], name: "吉林", number: 1.4, value: 1.4 },
        {
          value: [116.4551, 40.2539],
          name: "北京",
          number: 14.28,
          value: 14.28,
        },
        { value: [114.4995, 38.1006], name: "辽宁", number: 4.51, value: 4.51 },
        { value: [117.4219, 39.4189], name: "天津", number: 4.35, value: 4.35 },
        { value: [114.4995, 38.1006], name: "河北", number: 8.04, value: 8.04 },
        { value: [112.3352, 37.9413], name: "山西", number: 0.27, value: 0.27 },
        {
          value: [109.1162, 34.2004],
          name: "陕西",
          number: 12.91,
          value: 12.91,
        },
        { value: [103.5901, 36.3043], name: "甘肃", number: 0.01, value: 0.01 },
        { value: [106.3586, 38.1775], name: "宁夏", number: 2.09, value: 2.09 },
        { value: [101.4038, 36.8207], name: "青海", number: 0.06, value: 0.06 },
        { value: [87.9236, 43.5883], name: "新疆", number: 1.58, value: 1.58 },
        { value: [91.11, 29.97], name: "西藏", number: 0, value: 0 },
        { value: [103.9526, 30.7617], name: "四川", number: 9.27, value: 9.27 },
        {
          value: [108.384366, 30.439702],
          name: "重庆",
          number: 13.33,
          value: 13.33,
        },
        {
          value: [117.1582, 36.8701],
          name: "山东",
          number: 59.41,
          value: 59.41,
        },
        { value: [113.4668, 34.6234], name: "河南", number: 8.04, value: 8.04 },
        { value: [118.8062, 31.9208], name: "江苏", number: 11.1, value: 11.1 },
        { value: [117.29, 32.0581], name: "安徽", number: 7.49, value: 7.49 },
        { value: [114.3896, 30.6628], name: "湖北", number: 6.12, value: 6.12 },
        {
          value: [119.5313, 29.8773],
          name: "浙江",
          number: 14.62,
          value: 14.62,
        },
        {
          value: [119.4543, 25.9222],
          name: "福建",
          number: 11.46,
          value: 11.46,
        },
        { value: [116.0046, 28.6633], name: "江西", number: 0.49, value: 0.49 },
        { value: [113.0823, 28.2568], name: "湖南", number: 3.78, value: 3.78 },
        { value: [106.6992, 26.7682], name: "贵州", number: 3.47, value: 3.47 },
        { value: [102.9199, 25.4663], name: "云南", number: 1.6, value: 1.6 },
        {
          value: [113.12244, 23.009505],
          name: "广东",
          number: 20.95,
          value: 20.95,
        },
        { value: [110.3893, 19.8516], name: "广西", number: 10.3, value: 10.3 },
        { value: [106.6992, 26.7682], name: "海南", number: 4.54, value: 4.54 },
        {
          value: [121.4648, 31.2891],
          name: "上海",
          number: 10.17,
          value: 10.17,
        },
        { value: [119.18, 25.563], name: "台湾", number: 0, value: 0 },
        {
          value: [114.16546, 22.27534],
          name: "香港特别行政区",
          number: 0,
          value: 0,
        },
        {
          value: [113.54913, 22.19875],
          name: "澳门特别行政区",
          number: 0,
          value: 0,
        },
      ],
      websocketObj1: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 1,
      },
      websocketObj2: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 2,
      },
      websocketObj3: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 3,
      },
      websocketObj4: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 4,
      },
      websocketObj5: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 5,
      },
      websocketObj6: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 6,
      },
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      animationTimerArr: [],
    };
  },
  mounted() {
    // let baseUrl = "ws://192.168.140.43:8080";
    // let baseUrl = "ws://172.31.2.76:11304/";
    // let baseUrl = "ws://103.77.135.105/api";
    let baseUrl = "ws://172.31.2.77/api";
    // let baseUrl = "wss://" + location.host + "/api";

    this.initWebsocket(
      this.websocketObj1,
      `${baseUrl}/DashboardService/dp/allData`
    );
    // 左上-今日交易量
    this.initWebsocket(
      this.websocketObj2,
      `${baseUrl}/DashboardService/dp/currentDayTxData`
    );
    // 左下-月交易趋势图
    this.initWebsocket(
      this.websocketObj3,
      `${baseUrl}/DashboardService/dp/monthTxData`
    );
    // 右上-本年新增用户
    this.initWebsocket(
      this.websocketObj4,
      `${baseUrl}/DashboardService/dp/userData`
    );
    // 右下-今日行业分布
    this.initWebsocket(
      this.websocketObj5,
      `${baseUrl}/DashboardService/dp/businessDistributionData`
    );
    // this.initWebsocket(
    //   this.websocketObj6,
    //   `${baseUrl}/DashboardService/dp/mapData`
    // );
    // 获取当日数据 --左上
    this.getCurrentDayTxData();
    // 获取当月数据 --左下
    this.getCurrentMonthTxData();
    // 获取用户数据 --右上
    this.getUserData();
    // 获取行业数据 --右下
    this.getBusinessDistributionData();
    this.getChinaData();
    if (this.$route.query.width) {
      this.handleScreenAuto(this.$route.query.width, this.$route.query.height);
      window.onresize = () => {
        this.handleScreenAuto(
          this.$route.query.width,
          this.$route.query.height
        );
      };
    } else {
      this.handleScreenAuto();
      window.onresize = () => {
        this.handleScreenAuto();
      };
    }
    // 屏幕缩放
    // this.handleScreenAuto();
  },
  // deleted() {
  //   window.onresize = null;
  // },
  methods: {
    getCurrentDayTxData() {
      // console.log(
      //   this.currentDayTxData.amount.map((item) => Math.log10(item)),
      //   "logarr"
      // );
      if (this.myChart2 && this.getDateState()) {
        this.myChart2.dispose();
      }
      var chartDom = document.getElementById("topLeftMain");
      if (chartDom) {
        this.myChart2 = echarts.init(chartDom, {
          width: "350px",
          height: "200px",
        });
        var option;
        option = {
          //你的代码
          backgroundColor: "",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: "rgb(126,199,255)",
              },
            },
            // formatter: (data) => {
            //   console.log(data, "data");
            // },
            valueFormatter: (value) => {
              if (Math.floor(value) === +value) {
                return value;
              } else {
                return Math.floor(Math.pow(10, value));
              }
            },
          },
          legend: {
            show: true,
            itemWidth: 16,
            itemHeight: 16,
            right: 200,
            data: [
              {
                name: "金额",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  color: "#ECF7FF",
                  fontWeight: "bold",
                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  color: "#5febfa",
                },
              },
              {
                name: "笔数",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  color: "#ECF7FF",
                  fontWeight: "bold",

                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  fontSize: 18,
                  color: "#de4266",
                },
              },
            ],
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 14,
              padding: [0, 8, 0, 8],
            },
          },
          grid: {
            top: "15%",
            left: "8%",
            right: "1%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category", //连续数据
              boundaryGap: false,
              axisLine: {
                //x坐标轴轴线
                show: true,
                lineStyle: {
                  color: "", //x轴轴线颜色
                },
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(112, 151, 184, 1)", //x轴刻度颜色
                  fontSize: 14,
                },
              },
              splitLine: {
                //分割线
                show: false,
              },
              axisTick: {
                //刻度
                show: false,
              },
              data: this.currentDayX,
            },
          ],
          yAxis: [
            {
              name: "",
              // type: "log",
              nameTextStyle: {
                color: "#fff",

                fontSize: 12,
                padding: [0, 60, 0, 0],
              },
              // minInterval: 1,
              type: "value",
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false, //去掉y轴
              },
              axisLabel: {
                show: false, //去掉y轴label
                // textStyle: {
                //   color: "rgba(112, 151, 184, 1)",
                //   fontSize: 14,
                // },
              },
              axisTick: {
                show: false,
              },
              // boundaryGap: ["20%", "0%"],
              // max: 10,
            },
            {
              name: "",
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
                padding: [0, 60, 0, 0],
              },
              // minInterval: 1,
              type: "value",
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false, //去掉y轴
              },
              axisLabel: {
                show: false, //去掉y轴label
                // textStyle: {
                //   color: "rgba(112, 151, 184, 1)",
                //   fontSize: 14,
                // },
              },
              axisTick: {
                show: false,
              },
              boundaryGap: ["0%", "50%"],
            },
          ],
          series: [
            {
              name: "金额",
              type: "line",
              yAxisIndex: 0,
              symbol: "roundRect",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: "#56d5f8", // 线条颜色
                },
              },
              showSymbol: false,
              // itemStyle: {
              //   //折线拐点样式标志
              //   normal: {
              //     color: "#56d5f8", //拐点颜色
              //     label: {
              //       show: true, //开启显示
              //       color: "#fff",
              //       position: "top", //在上方显示
              //       formatter: function (res) {
              //         console.log(res, "res");
              //         if (res.value) {
              //           return res.value;
              //         } else {
              //           return 0;
              //         }
              //       },
              //     },
              //   },
              // },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 渐变颜色
                    {
                      offset: 0,
                      color: "rgba(86, 213, 248, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(86, 213, 248, 0)",
                    },
                  ],
                  global: false,
                },
              },
              data: this.currentDayTxData.amount.map(
                (item) => item && Math.log10(item)
              ),
              // data: this.currentDayTxData.amount,
            },
            {
              name: "笔数",
              type: "line",
              yAxisIndex: 1,
              showSymbol: false,
              symbol: "roundRect", // 正方形
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: "#de4266", // 线条颜色
                },
              },
              itemStyle: {
                //折线拐点样式标志
                normal: {
                  color: "#de4266", //拐点颜色
                  label: {
                    show: true, //开启显示
                    color: "#fff",
                    position: "top", //在上方显示
                    formatter: function (res) {
                      if (res.value) {
                        return res.value;
                      } else {
                        return 0;
                      }
                    },
                  },
                },
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 渐变颜色
                    {
                      offset: 0,
                      color: "rgba(222, 66, 102, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(222, 66, 102, 0)",
                    },
                  ],
                  global: false,
                },
              },
              data: this.currentDayTxData.number,
            },
          ],
        };
        this.myChart2.setOption(option);
      }
    },
    getCurrentMonthTxData() {
      if (this.myChart3 && this.getDateState()) {
        this.myChart3.dispose();
      }
      var chartDom = document.getElementById("bottomLeftMain");
      if (chartDom) {
        this.myChart3 = echarts.init(chartDom, {
          width: "350px",
          height: "200px",
        });
        var option;
        option = {
          backgroundColor: "",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
              fontSize: 18,
            },
            backgroundColor: "rgba(255,255,255,1)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
          },
          grid: {
            top: "15%",
            left: "8%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
          },
          legend: {
            //右上角的图标
            show: true,
            itemWidth: 16,
            itemHeight: 16,
            right: 200,
            data: [
              {
                name: "金额",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  fontWeight: "bold",
                  color: "#ECF7FF",
                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  color: "#5febfa",
                },
              },
              {
                name: "笔数",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  fontWeight: "bold",
                  color: "#ECF7FF",
                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  fontSize: 18,
                  color: "#de4266",
                },
              },
            ],
          },
          xAxis: [
            {
              data: this.monthTxData.month,
              axisLabel: {
                color: "rgba(112, 151, 184, 1)",
                fontSize: 14,
                // interval: "auto", // x轴间距
              },
              axisTick: {
                //刻度
                show: false,
              },
              axisLine: {
                //x坐标轴轴线
                show: true,
                lineStyle: {
                  color: "", //x轴轴线颜色
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              axisLabel: {
                show: false,
                // fontSize: 24,
                // color: "#A1BADF",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              name: "",
            },
            {
              type: "value",
              name: "",
              axisLabel: {
                show: true,
                // fontSize: 24,
                // color: "#A1BADF",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              boundaryGap: ["10%", "50%"],
            },
          ],
          series: [
            {
              name: "金额",
              yAxisIndex: 0,
              type: "bar",
              barWidth: 20,
              data: this.monthTxData.amount,
              showBackground: false,
              backgroundStyle: {
                color: "#69ddee",
              },
              label: {
                show: false,
                position: "top",
                color: "#00A8FF",
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: -0.2,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#69ddee",
                      },
                      {
                        offset: 1,
                        color: "#69ddee",
                      },
                    ],
                  },
                  barBorderRadius: [2, 2, 0, 0],
                },
              },
            },
            {
              name: "笔数",
              type: "line",
              data: this.monthTxData.number,
              showSymbol: false, //不显示拐点
              smooth: true,
              symbol: "circle", //拐点标志形状
              symbolSize: 10,
              lineStyle: {
                color: "#de4266",
                normal: {
                  width: 1,
                  color: "#de4266", // 线条颜色
                },
              },
              itemStyle: {
                color: "#de4266",
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: -0.2,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(222, 66, 102, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(222, 66, 102, 0)",
                    },
                  ],
                },
              },
            },
          ],
        };
        this.myChart3.setOption(option);
      }
    },
    getUserData() {
      if (this.myChart4 && this.getDateState()) {
        this.myChart4.dispose();
      }
      var chartDom = document.getElementById("topRightMain");
      const colorList = ["#85c7f1", "#d54166", "#cbbc39", "#49db90"];

      if (chartDom) {
        this.myChart4 = echarts.init(chartDom, {
          width: "400px",
          height: "200px",
        });

        const max = Math.max(...this.userData.map((item) => item.value));
        const rate = 0.05; //最小比例
        const formatData = this.userData.map((item, index) => {
          let formatValue;
          if (item.value < max)
            formatValue = rate * max + item.value * (1 - rate);
          else formatValue = item.value;
          return {
            ...item,
            value: formatValue,
            orginValue: item.value,
            textStyle: {
              fontSize: 14,
              fontWeight: "bold",
              color: "#ECF7FF",
              // padding: [0, 8, 0, 8],
            },
            label: {
              color: colorList[index],
              fontSize: "22px",
              fontWeight: "bold",
            },
          };
        });

        var option;
        option = {
          backgroundColor: "",
          color: colorList,
          legend: {
            //图例（小方块）
            itemHeight: 16,
            itemWidth: 16,
            icon: "rect",
            orient: "horizontal",
            // top: "bottom",
            left: "15%",
            bottom: "55",
            itemGap: 40,
            // padding: [10, 0],
            // right: "5%",
            textStyle: {
              align: "left",
              color: "#",
              verticalAlign: "middle",
              textStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 20,
                padding: [0, 8, 0, 8],
              },
            },
            // data: this.userData,
            data: formatData,
            formatter: (name) => {
              if (this.userData.length) {
                const item = this.userData.filter(
                  (item) => item.name === name
                )[0];
                return `${name}`;
              }
            },
          },
          // tooltip: {
          //   trigger: "item",
          //   formatter: "{c}",
          // },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["45%", "65%"],
              center: ["55%", "55%"],
              // roseType: "area",
              // roseType: "radius",
              left: 20,
              label: {
                // formatter: "{c}",
                formatter: (params) => params.data.orginValue,
                fontSize: 18,
              },
              labelLine: {
                show: false,
                length: 20,
                length2: 10,
                lineStyle: {
                  width: 2,
                },
              },
              data: formatData,
            },
          ],
        };
        this.myChart4.setOption(option);
      }
    },
    getBusinessDistributionData() {
      if (this.myChart5 && this.getDateState()) {
        this.myChart5.dispose();
      }
      var chartDom = document.getElementById("bottomRightMain");
      if (chartDom) {
        this.myChart5 = echarts.init(chartDom, {
          width: "210px",
          height: "210px",
        });
        var option;
        let colorList = [
          "#d54166",
          "#d54166",
          "#fdb34a",
          "#fdb34a",
          // "#4dcee1",
          "#4dcee1",
          "#4dcee1",
          "#49db90",
          "#49db90",
        ];
        option = {
          color: colorList,
          backgroundColor: "",
          tooltip: {
            show: true,
            trigger: "item",
            padding: [8, 15],
            backgroundColor: "",
            borderColor: "rgba(3, 11, 44, 0.5)",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: "160",
            // right: "16%",
            top: "13%",
            // bottom: "0%",
          },
          xAxis: [
            {
              splitLine: {
                show: false,
              },
              type: "value",
              show: false,
            },
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: "category", //坐标轴类型，category：类目轴
              axisTick: {
                show: false,
              },
              inverse: true, //是否反向坐标轴
              data: this.businessDistributionData.map((item) => item.name),
              axisLabel: {
                color: "#adf8ff",
                fontSize: 14,
                fontWeight: "bold",
                margin: 10,
                formatter: (name, index) => {
                  return `${name}`;
                },
              },
            },
            {
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: true,
              axisLabel: {
                textStyle: {
                  color: "#adf8ff",
                  fontSize: 14,
                  fontWeight: "bold",
                },
                formatter: function (value) {
                  return value;
                },
              },
              data: this.businessDistributionData.map((item) => item.value),
            },
          ],

          series: [
            {
              name: "",
              type: "bar",
              barWidth: 10, // 柱子宽度
              MaxSize: 0,
              showBackground: true,
              // barBorderRadius: [30, 0, 0, 30],
              backgroundStyle: {
                color: "rgba(255,255,255,0)",
              },
              label: {
                show: false,
                offset: [10, -16],
                color: "#fff",
                fontWeight: 500,
                position: "left",
                align: "left",
                formatter: function (params) {
                  console.log(params);
                  return params.data.name;
                },
              },
              data: this.businessDistributionData.map((item, index) => {
                return {
                  name: item.name,
                  value: item.value,
                  itemStyle: {
                    // barBorderRadius: [30, 0, 0, 30],
                    color: colorList[index],
                    borderWidth: 0,
                  },
                };
              }),
            },
          ],
        };

        this.myChart5.setOption(option);
      }
    },
    getChinaData() {
      if (this.myChart6 && this.getDateState()) {
        this.myChart6.dispose();
      }

      var chartDom = document.getElementById("centerMain");
      if (chartDom) {
        echarts.registerMap("china", chinaMap);
        this.myChart6 = echarts.init(chartDom);
        var option;
        option = {
          backgroundColor: "",
          tooltip: {
            triggerOn: "onmousemove",
          },
          legend: {
            show: false,
          },
          visualMap: {
            min: 0,
            max: 60,
            left: 26,
            bottom: 40,
            showLabel: true,
            text: ["高", "低"],
            show: false,
            pieces: [
              {
                gt: 13,
                label: ">13",
                color: "#2F75B5",
              },
              {
                gte: 3,
                lte: 13,
                label: "3 -13",
                color: "#9BC2E6",
              },
              {
                gte: 0,
                lt: 3,
                label: "1 - 3",
                color: "#DDEBF7",
              },
              // {
              //   gte: 10,
              //   lt: 100,
              //   label: "10 - 100人",
              //   color: "#ffd768",
              // },
              // {
              //   gte: 1,
              //   lt: 10,
              //   label: "1 - 10人",
              //   color: "#BEDAEE",
              // },
            ],
            // inRange: {
            //   color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            // },

            // outOfRange: {
            //   color: ["#999999"],
            // },
            splitNumber: 0,
          },
          geo: {
            map: "china",
            show: true,
            roam: false,
            label: {
              emphasis: {
                show: true,
              },
            },
            // itemStyle: {
            //   normal: {
            //     borderColor: 'rgba(0,63,140,0.2)',
            //     shadowColor: 'rgba(0,63,140,0.2)',
            //     shadowOffsetY: 20,
            //     shadowBlur: 30
            //   }
            // }
          },
          series: [
            {
              type: "map",
              map: "china",
              aspectScale: 0.75,
              showLegendSymbol: false,
              // zoom:1.1,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },

              itemStyle: {
                normal: {
                  areaColor: "#B2CAE0",
                  borderColor: "#fff",
                  borderWidth: 1,
                },
                emphasis: {
                  label: {
                    show: true,
                  },
                  areaColor: "#FFC000",
                  // new echarts.graphic.LinearGradient(
                  //   0,
                  //   0,
                  //   0,
                  //   1,
                  //   [
                  //     {
                  //       offset: 0,
                  //       color: "#9df1d9", // 0%处的颜色
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: "#5de5f1", // 100%处的颜色
                  //     },
                  //   ],
                  //   false
                  // ),
                },
              },
              label: {
                formatter: (v) => {
                  // return `{b1|${v.name} +10}`;
                  console.log(v);
                  let num = 0;
                  if (v.data && v.data.number) {
                    if (v.data.number >= 13) {
                      num = 10;
                    } else if (v.data.number < 13 && v.data.number >= 3) {
                      num = 5;
                    } else if (v.data.number > 0 && v.data.number < 3) {
                      num = 1;
                    }
                  }

                  return `{b1|+${num}}`;
                },
                distance: -(18 + 20),
                rich: {
                  b1: {
                    width: 100,
                    height: 18,
                    backgroundColor: "",
                    // backgroundColor: "gold",
                    align: "center",
                    color: "#ff3b1b",
                    fontWeight: 700,
                    fontSize: 14,
                    padding: [2, 0, 0, 0],
                  },
                  b2: {
                    width: 12,
                    height: 12,
                    align: "center",
                    backgroundColor: "#999999",
                  },
                },
              },
              emphasis: {
                itemStyle: {
                  areaColor: null,
                  borderWidth: 3,
                  shadowColor: "rgba(0,0,0,.2)",
                  shadowOffsetX: 5,
                  shadowOffsetY: 5,
                },
              },
              animation: false,
              data: this.geoCoordMap,
            },
          ],
        };
        this.myChart6.setOption(option);
        requestAnimationFrame(() => {
          this.animationTimerArr.forEach((timer) => {
            clearInterval(timer);
            timer = null;
          });
          // const arr = [];
          this.geoCoordMap.forEach((item) => {
            // count为10秒闪烁一次时，一分钟应该闪烁的频次
            // 当 》13时，保持当前频次不变
            // 当3<=count<13时，要求5秒钟闪烁一次，即count*2
            // 当count<=3时，要求1秒钟闪烁一次，即count*10
            let count = Math.ceil(item.number);
            if (count >= 13) {
              count = count;
            } else if (count >= 3 && count < 13) {
              count = count * 2;
            } else if (count <= 3) {
              count = count * 10;
            }
            let time = count > 0 ? Math.ceil((60 * 1000) / count) : 0;
            time = time < 1500 ? 1500 : time;
            // console.log(count, "count");
            // console.log(time, "time");
            if (count > 0) {
              let timeId = setInterval(() => {
                this.myChart6.dispatchAction({
                  type: "highlight",
                  seriesIndex: 0, //这行不能
                  // dataIndex: inx,
                  name: item.name,
                });
                // let time2 = time > 1000 ? 1000 : time - 100;
                let timeOutId = setTimeout(() => {
                  this.myChart6.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0, //这行不能
                    // dataIndex: inx,
                    name: item.name,
                  });
                  clearTimeout(timeOutId);
                }, 800);
              }, time);
              this.animationTimerArr.push(timeId);
            }
          });
        });
      }
    },
    initWebsocket(wsObj, url) {
      let _this = this;
      if (wsObj.websocket) {
        wsObj.websocket.close();
      }
      wsObj.websocket = new WebSocket(url);
      const heartCheck = this.initHeartCheck(wsObj, url);
      wsObj.websocket.onopen = function () {
        heartCheck.start(this, wsObj, url);
      };
      wsObj.websocket.onmessage = function (data) {
        heartCheck.start(_this, wsObj, url);
        const flag = wsObj.flag;
        if (data.data !== "pong") {
          if (flag === 1) {
            // 整体数据，顶部
            _this.dashboardData = JSON.parse(data.data).data;
          } else if (flag === 2) {
            // 当天数据 左上
            _this.currentDayTxData = JSON.parse(data.data).data;
            _this.getCurrentDayTxData();
          } else if (flag === 3) {
            // 当月数据 左下
            _this.monthTxData = JSON.parse(data.data).data;
            _this.getCurrentMonthTxData();
          } else if (flag === 4) {
            // 用户数据 右上
            _this.userData = JSON.parse(data.data).data;
            _this.getUserData();
          } else if (flag === 5) {
            // 行业数据 右下
            _this.businessDistributionData = JSON.parse(data.data).data;
            _this.getBusinessDistributionData();
          } else {
            // 地图 中间
            let resData = JSON.parse(data.data).data;
            // _this.geoCoordMap = data;
            for (let i = 0; i < _this.geoCoordMap.length; i++) {
              for (let j = 0; j < resData.length; j++) {
                if (_this.geoCoordMap[i].name === resData[j].name) {
                  _this.geoCoordMap[i].number = resData[j].number;
                }
              }
            }
            // console.log(_this.geoCoordMap);
            _this.getChinaData();
          }
        }
      };
      wsObj.websocket.onerror = function (data) {
        setTimeout(() => {
          _this.initWebsocket(wsObj, url);
        }, 4000);
      };
    },
    initHeartCheck(wsObj, url) {
      let _this = this;
      return {
        timeout: 10 * 1000, // 每10s向服务端发送一次消息
        serverTimeout: 10 * 1000, // 10s收不到服务端消息算超时
        timer: null,
        serverTimer: null,
        reset() {
          // 心跳检测重置
          clearTimeout(this.timer);
          clearTimeout(this.serverTimer);
          this.timer = null;
          this.serverTimer = null;
          return this;
        },
        start(that, wsObj, url) {
          // 心跳检测启动
          this.reset();

          this.timer = setTimeout(() => {
            wsObj.websocket.send("ping"); // 定时向服务端发送消息
            // let _this = this;
            if (!this.serverTimer) {
              this.serverTimer = setTimeout(() => {
                // 关闭连接触发重连
                console.log(
                  new Date().toLocaleString(),
                  "not received pong, close the websocket"
                );
                // debugger;
                _this.initWebsocket(wsObj, url); // 重置ws链接
              }, this.serverTimeout);
            }
          }, this.timeout);
        },
      };
    },
    // 数据大屏自适应函数
    // handleScreenAuto() {
    //   const designDraftWidth = 1920; //设计稿的宽度
    //   const designDraftHeight = 1080; //设计稿的高度
    //   // 根据屏幕的变化适配的比例
    //   const scale =
    //     document.documentElement.clientWidth /
    //       document.documentElement.clientHeight <
    //     designDraftWidth / designDraftHeight
    //       ? document.documentElement.clientWidth / designDraftWidth
    //       : document.documentElement.clientHeight / designDraftHeight;
    //   // 缩放比例
    //   document.querySelector(
    //     "#screen"
    //   ).style.transform = `scale(${scale}) translate(-50%, -50%)`;
    // },
    handleScreenAuto(width, height) {
      // console.log("auto");
      const designWidth = 1920; //设计稿的宽度
      const designHeight = 1080; //设计稿的高度
      const renderDom = document.querySelector("#screen");
      let clientHeight = Number(width) || document.documentElement.clientHeight;
      let clientWidth = Number(height) || document.documentElement.clientWidth;

      // let clientHeight = 512;
      // let clientWidth = 1080;

      let scale = 1;
      let scaleWidth = clientWidth / designWidth;
      let scaleHeight = clientHeight / designHeight;

      // console.log(clientWidth, "width");
      // console.log(clientHeight, "height");

      if (scaleWidth > 1 || scaleHeight > 1) {
        scale = Math.min(scaleWidth, scaleHeight);
      } else {
        scale = Math.min(scaleWidth, scaleHeight);
      }

      //缩放比例
      renderDom.style.transform = `scale(${scale})`;
    },
    formatNumber(value) {
      value = Number(value);
      return value.toLocaleString("en-US");
    },
    getDateState() {
      let date = new Date();
      if (date.getHours >= 0 && date.getHours <= 5) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #000724;
}
.screen-box {
  background-color: #000724;
}
// .screen-box {
//   background-color: #000724;
// }
.screen {
  background: url("@/assets/img/background.png") no-repeat;
  background-size: contain;
  // width: 100%;
  // height: 100%;
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top,
  .center {
    display: flex;
    justify-content: center;
  }
  .top {
    height: 90px;
    align-items: end;
    padding-top: 38px;
    img {
      width: 810px;
      height: 53px;
    }
  }
  .center {
    height: 20%;
    font-weight: bold;
    .numberShow {
      width: 78%;
      padding-top: 60px;
      display: flex;
      .numberBox {
        width: 25%;
        height: 100%;
        .num {
          font-size: 57px;
          line-height: 72px;
          .units {
            padding-left: 8px;
            font-size: 36px;
          }
        }
        .text {
          font-size: 22px;
          color: #f9feff;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: row;
    padding: 0 60px;
    box-sizing: border-box;
    .leftBox,
    .rightBox {
      width: 463px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding-top: 50px;
      .echartsDiv {
        width: 100%;
        height: 353px;
        // height: 44%;
        // background: url("@/assets/左上.png") no-repeat;
        background-size: contain;
        // margin-top: 8px;
        position: relative;
        .firstLine {
          margin-top: 16px;
          margin-left: 35px;
          display: flex;
          flex-direction: row;
          img {
            text-align: left;
            margin-top: 5px;
          }
          .title {
            margin-left: 5px;
            font-size: 21px;
            font-weight: bold;
            text-align: left;
            color: #adf8ff;
            font-family: MicrosoftYaHei;
          }
        }
      }
      .echartsDiv1 {
        background: url("@/assets/img/left_top.png") no-repeat center;
        background-size: contain;
        width: 100%;
        .firstLine {
          margin: 16px 0 0 25px;
        }
      }
      .echartsDiv2 {
        background: url("@/assets/img/left_bottom.png") no-repeat center;
        background-size: contain;
        width: 100%;
        .firstLine {
          margin: 20px 0 0 35px;
        }
      }
      .echartsDiv3 {
        background: url("@/assets/img/right_top.png") no-repeat right center;
        background-size: contain;
        width: 100%;
        .firstLine {
          margin: 30px 0 0 35px;
        }
      }
      .echartsDiv4 {
        background: url("@/assets/img/right_bottom.png") no-repeat right center;
        background-size: contain;
        width: 100%;
        .firstLine {
          margin: 20px 0 0 35px;
        }
      }
    }
    .centerBox {
      flex: 1;
    }
  }
}
#topLeftMain,
#bottomLeftMain,
#topRightMain,
#bottomRightMain {
  width: 600px;
  height: 300px;
}
#centerMain {
  width: 860px;
  height: 700px;
}
// .box {
//   height: 100%;
//   width: 100%;
//   .screen {
//     display: inline-block;
//     width: 1920px; //设计稿的宽度
//     height: 1080px; //设计稿的高度
//     transform-origin: 0 0;
//     position: absolute;
//     left: 50%;
//     top: -50%;
//   }
// }
</style>
